<template>
	<view>

        <span @click="open()">{{title}}</span>
        <uni-popup ref="popup" type="center">
            <view class="pop-content">
                <view  class="pop-bohu">
                    <view @click="close()" class="pop-shut"></view>

                    <view class="pop-title">订阅价格变动通知</view>

                    <p class="pop-text">价格变动这么快？！订阅价格变动通知，涨价降价我们将第一时间通知您，帮您找准买房时机！</p>

                    <view class="pop-phone">
                        <input  type="text" placeholder="请输入订阅手机号">
                    </view>

                    <button class="pop-btn-area"  @click="expert">确定</button>
                </view> 
            </view>   
        </uni-popup> 

        <uni-popup ref="message" type="center">
            <view class="pop-expert2-popup">
                <p class="pop-expert2-popup-p">请输入正确格式的手机号</p>
                <p @click="close1()" class="pop-expert2-popup-shut">取消</p>
            </view>
        </uni-popup>
		
	</view>
</template>


<script>
    import uniPopup from '@/components/uni-popup/uni-popup.vue'
    import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
    import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
        components: {
            uniPopup,
            uniPopupMessage,
            uniPopupDialog,
        },

		data() {
			return {
				
			}
		},
		props: {
			title:{type:String},
		},
		methods: {
			open(){
                this.$refs.popup.open()
            },
            close(){
                 this.$refs.popup.close()
            },
            expert(){
                this.$refs.message.open()
            },
            close1(){
                this.$refs.message.close()
            }
		}
	}
</script>

<style scoped>
    .pop-shut{
        height: 32upx;
        width: 32upx;
        position: relative;
        top:-30upx;
        left: 480upx;
        background: url("../../static/img00/shut.png") no-repeat;
        background-size: 100% 100%;
    }
    .pop-content{

        margin-left: 10%;
        margin-right: 10%;
        background: #fff;
        border-radius: 10upx;
        display: flex;
    }
    .pop-bohu{
        padding: 50upx 60upx 50upx 60upx;
        margin: 0 auto;
        align-self: center;
    }

    .pop-title{
        font-size: 40upx;
        font-weight: 550;
        color: #3e4a59;
        text-align: center;
    }
    .pop-text{
        margin:30upx 0 50upx 0;
        text-align: center;
		color: #000000;
		line-height: 60rpx;
		font-weight: 500;
    }
    .pop-phone{
        border: 1upx solid #cdd7e1;
        border-radius: 10upx;
    }
    .pop-phone>input{
        padding: 0 30upx;
		color: #000000;
		font-weight: 500;
		border:1px solid #CCCCCC;
    }
    input{
        height: 86upx;
    }
    .pop-btn-area{
        margin-top: 30upx;
        background: #13c3c3;
        color: #fff;
    }

    .pop-expert2-popup{
        width: 510upx;
        height: 240upx;
        background: #fff;
        border-radius: 10upx;
    }
    .pop-expert2-popup-p{
        height: 150upx;
        text-align: center;
        font-size: 28uxp;
        color: #3e4a59;
        line-height: 150upx;
        border-bottom: 1upx solid rgb(195, 195, 195);
    }
    .pop-expert2-popup-shut{
        text-align: center;
        line-height: 90upx;
        color: #47b3e3;
    }
	
</style>
